




<template>
    <view style="height: 100%;">
        <scroll-view style="height: 100%;" :scroll-into-view="intoIndex" scroll-y="true" scroll-with-animation
            @scroll="scroll">
            <view class="network">
                <view :id="'slot' + index" class="network-item" v-for="(item, index) in form" :key="index">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                {{ item.title }}
                            </view>
                            <view class="bg"></view>
                        </view>
                        <ImgUpload v-if="item.fileList" :title="item.title" :fileList="form[key].fileList"
                            @change="(val) => fileChange(val, 'key')">
                        </ImgUpload>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model" v-for="(citem, cindex) in item.data" :key="cindex">
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        型号
                                    </view>
                                    <image class="del" v-if="cindex!=0" src="/static/del1.png"></image>
                                </view>

                                <view class="fileds size">
                                    <input v-model="form[index].data[cindex].size" class="cinput size-input" type="text"
                                        placeholder="请输入型号">
                                    <view class="xxx">
                                        X
                                    </view>
                                    <input v-model="form[index].data[cindex].num" class="cinput num" placeholder="数量"
                                        type="number">
                                </view>
                            </view>
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        厂家
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input v-model="form[index].data[cindex].cj" class="cinput" type="text"
                                        placeholder="请输入厂家">
                                </view>
                            </view>
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        生产日期
                                    </view>
                                </view>
                                <view class="fileds cdata-box">
                                    <view @tap="dataOpen(index, cindex, 'show1')" class="cinput"
                                        :style="{ color: form[index].data[cindex].date1 ? '#282828' : '#B8B8B8' }">
                                        {{ formatDate(form[index].data[cindex].date1) ||
                                            '请选择生产日期'
                                        }}
                                    </view>
                                    <image class="cicon" src="/static/right.png"></image>
                                    <u-datetime-picker :show="form[index].data[cindex].show1"
                                        v-model="form[index].data[cindex].date1" mode="date"
                                        @cancel="closeDate(index, cindex, 'show1')"
                                        @confirm="closeDate(index, cindex, 'show1')"></u-datetime-picker>
                                </view>
                            </view>
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        年检到期日期
                                    </view>
                                </view>
                                <view class="fileds cdata-box">
                                    <view @tap="dataOpen(index, cindex, 'show2')" class="cinput"
                                        :style="{ color: form[index].data[cindex].date2 ? '#282828' : '#B8B8B8' }">
                                        {{ formatDate(form[index].data[cindex].date2) ||
                                            '请选择年检到期日期'
                                        }}
                                    </view>
                                    <image class="cicon" src="/static/right.png"></image>
                                    <u-datetime-picker :show="form[index].data[cindex].show2"
                                        v-model="form[index].data[cindex].date2" mode="date"
                                        @cancel="closeDate(index, cindex, 'show2')"
                                        @confirm="closeDate(index, cindex, 'show2')"></u-datetime-picker>
                                </view>
                            </view>
                        </view>
                        <view class="add-box">
                            <image class="add" @tap="addItem(index)" src="/static/add_incident.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { formatDate } from "@/utils/utils"
export default {
    props: {
        intoIndex: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: []
        }
    },
    // 局部注册的组件
    components: {},

    created() {
        uni.$u.deepClone(this.selected)
    },

    watch: {

    },

    data() {
        return {

            fileList: [],
            model: {
                size: '',
                num: '',
                cj: '',
                date1: '',
                date2: '',
                show1: false,
                show2: false
            },
            form: [
                {
                    title: '主控制器',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            size: '',
                            num: '',
                            cj: '',
                            date1: '',
                            date2: '',
                            show1: false,
                            show2: false
                        }
                    ]
                },

                {
                    title: '气体储瓶',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            size: '',
                            num: '',
                            cj: '',
                            date1: '',
                            date2: '',
                            show1: false,
                            show2: false
                        }
                    ]
                },

                {
                    title: '应急照明灯',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            size: '',
                            num: '',
                            cj: '',
                            date1: '',
                            date2: '',
                            show1: false,
                            show2: false
                        }
                    ]
                },

                {
                    title: '手提灭火器',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            size: '',
                            num: '',
                            cj: '',
                            date1: '',
                            date2: '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
                {
                    title: '其他设置设备数量',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            size: '',
                            num: '',
                            cj: '',
                            date1: '',
                            date2: '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
                {
                    title: '六氮丙烷',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            size: '',
                            num: '',
                            cj: '',
                            date1: '',
                            date2: '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
            ]

        }
    },
    // 计算属性
    computed: {},
    // 组件方法
    methods: {
        scroll(e) {

        },
        fileChange(val, key) {
            this.fileList = val
        },
        formatDate(time) {
            if (!time) return ''
            return formatDate(new Date(time))
        },
        dataOpen(index, cindex, key) {
            this.form[index].data[cindex][key] = true
        },
        closeDate(index, cindex, key) {
            this.form[index].data[cindex][key] = false
        },
        addItem(index){
            this.form[index].data.push(this.model)
        }


    },
}
</script> 

<style scoped lang="scss" src="./assets/index.scss"></style>
